<template>
    <div class="demand-user">
        <a-modal width="1000px" :visible="visible" title="添加技术经纪人" @cancel="closeModal" class="yuan-modal demand-user-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="saveLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :label-col="{ style: { width: '250px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 250px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box">
                            <a-form-model-item class="yuan-form-item" label="请输入需要授权的技术经纪人手机号" prop="">
                                <a-input-search style="width:200px" allowClear v-model="userPhone" placeholder="请输入完整手机号搜索"
                                    @search="search" />
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <div class="user-info text-nowarp" :class="selectUser===idx&& 'select-user' "
                                v-for="(item,idx) in userList" @click="selectUser=idx">
                                <i class="iconfont">&#xe63b;</i>
                                <img class="user-header" :src="item.headPortrait || require('@/assets/img/user.png')" />
                                <span class="user-name">技术经纪人：{{item.name}}</span>
                            </div>
                            <div style="text-align:right" v-if="userList.length>0">
                                <a-pagination v-model="pagination.pageNum" :pageSize="pagination.pageSize"
                                    :total="pagination.total" show-less-items />
                            </div>

                            <div class="page-content" v-else>
                                <div class="list-null">
                                    <div class="iconfont">&#xe642;</div>
                                    <div>暂无数据</div>
                                </div>

                            </div>
                        </div>

                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <a-button @click="modalOk" type="primary" :loading="saveLoading">
                    确认
                </a-button>
                <a-button @click="closeModal">
                    取消
                </a-button>
            </template>

        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import api from "@/api/api";
@Component({
    name: "tpl",
    components: { UploadVue },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            //
        }
    }
    userList = [];
    selectUser = "";
    saveLoading = false;
    userPhone = "";
    pagination = {
        current: 1,
        pageSize: 12,
        total: 0,
        onChange: this.pageChange,
    };
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.search();
    }

    async mounted() {
        this.search()
    }
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        this.saveLoading = true;
        try {
            // const res = await warningApi.planAdd(this.sureInfo);
            // this.$message.success(res.msg);
            this.closeModal();
            this.$emit("sureClose", this.userList[this.selectUser]);
        } finally {
            this.saveLoading = false;
        }
    }
    async search() {
        this.saveLoading = true;
        try {
            const res = await api.getBrokerList({
                pageNum: this.pagination.current,
                pageSize: this.pagination.pageSize,
                phone: this.userPhone,
            });
            this.userList = res.data?.rows || [];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.saveLoading = false;
        }
    }
}
</script>
<style lang="scss">
.demand-user-modal {
    .user-header {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        border: solid 1px #eee;
        margin-right: 20px;
    }
    .user-info {
        width: 30%;
        border: solid 1px #eee;
        display: inline-block;
        padding: 15px;
        cursor: pointer;
        position: relative;
        margin-right: 15px;
        margin-top: 10px;
        .iconfont {
            position: absolute;
            top: 2px;
            right: 4px;
            color: #eee;
        }
    }
    .select-user {
        .iconfont {
            color: #204fb6;
        }
    }
}
</style>
